<template>
  <div class="like">
    <div class="like-top">
      <img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt=""/>
      猜你喜欢
    </div>
    <ul>
      <li class="like-item"  v-for="(item, index) in likeList" :key="index" @click="toDetails()">
        <div class="like-img">
          <img :src="item.imgurl" alt=""/>
        </div>
        <div class="like-text">
          <div class="like-title">{{item.title}}</div>
          <div class="like-comment">{{item.messageNum}}条评论</div>
          <div class="like-message">
              <span class="like-mark">￥{{item.price}}</span>起
              <span class="like-location">{{item.location}}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
    props:['likeList'],
    data() {
        return {
            
        }
    },
    methods: {
      toDetails(){
        this.$router.push('/detail')
      }
    },
};
</script>
<style scoped>
.like{
    background-color: #fff;
    margin-bottom: .2rem;
}
.like-top {
    display: flex;
  font-size: .32rem;;
  padding: .2rem;
}
.like-top img{
    width: .32rem;
    margin-right: .1rem;
}

.like-item{
    border-bottom: 1px solid #eee5e5;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-items: left;
    padding: .2rem 0;
}
.like-item p{
    font-size: .24rem;
}
.like-img{
    margin-right: .2rem;
    float: left;
}
.like-img img{
    width: 2rem;
    height: 2rem;
}

.like-title{
    margin-top: .4rem;
    font-size: .36rem;
    font-weight: bold;
}
.like-comment{
    margin-top: .3rem;
    font-size: .24rem;
}
.like-message{
    font-size: .24rem;
    margin-top: .3rem;
}
.like-mark{
    color: red;
    font-size: .3rem;
}
.like-location{
    position: absolute;
    right: 0.2rem;
    bottom: .2rem;
    font-size: .28rem;
}
</style>